<style lang="scss">
.app-nav {
  //margin-bottom: 10px;
  height: var(--app-nav-bar-height);
  .el-link {
    font-size: 16px;
  }
  overflow: auto;
  .z-space__item {
    flex-basis: 0;
    //flex: 1;
    //width: max-content;
  }
  .el-link {
    width: max-content;
  }
  .z-space {
    height: 100%;
  }

  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.app-container {
  height: var(--app-container-height);
}

.app--mounted {
  .el-link--active {
    color:  var(--el-color-primary) !important;
    //border-bottom: 1px solid var(--el-color-primary);
  }
}
</style>

<template>
  <div id="app">
    <div class="app-nav app-scrollbar" :class="{'app--mounted': mounted}">
      <z-space column-gap="12px">
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link v-for="route in routes"
                     class="el-link el-link--info"
                     :class="{'el-link--active': getActive(route)}"
                     :to="getPath(route)">
          {{getName(route)}}
        </router-link>
        <!--      <router-link class="el-link el-link&#45;&#45;info" to="/grid">grid组件</router-link>-->
        <!--      <router-link class="el-link el-link&#45;&#45;info" to="/space">space组件</router-link>-->
      </z-space>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import {getParRouteDef, routes} from "./router/routes";

export default {
  name: 'App',
  mixins: [
  ],
  data() {
    return {
      routes: routes.filter(v => {
        if (v?.meta?.hide) {
          return false;
        }
        return true
      }),
      mounted: false
    }
  },
  mounted() {
    // console.log(this.$dialog)
    setTimeout(() => {
      this.mounted = true
    }, 150)
  },
  methods: {
    getName(route) {
      let v=  route.path.slice(1)
      if (route?.meta?.title) {
        return route?.meta?.title
      }
      if (v === '') {
        return '首页'
      }
      return v + '组件'
    },
    getPath(route) {
      return route.path
    },
    getActive(route) {
      // console.log(route.path, this.$route.path)
      if (route.path === this.$route.path) {
        return true
      }
      // let parRouteDef1= getParRouteDef(route)
      let parRouteDef2 = getParRouteDef(this.$route)
      // console.log(parRouteDef1, route)
      if (parRouteDef2) {
        if (route.path === parRouteDef2.path) {
          return true
        }
      }
      // console.log(parRouteDef.path)
      return false
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
